<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>岚小字识字 - 直播系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
      min-height: 100vh;
      display: flex;
      overflow: hidden;
      position: relative;
      align-items: flex-start;
      /* 防止子元素拉伸 */
    }

    /* 动态背景装饰 */
    body::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-image:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
      animation: backgroundFloat 20s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes backgroundFloat {

      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }

      33% {
        transform: translate(-20px, -20px) rotate(120deg);
      }

      66% {
        transform: translate(20px, -10px) rotate(240deg);
      }
    }

    /* 左侧课表 - 全新设计 */
    .course-sidebar {
      width: 200px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
      display: flex;
      flex-direction: column;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      box-shadow: 5px 0 30px rgba(0, 0, 0, 0.1);
      border-radius: 0 30px 30px 0;
      overflow: hidden;
      height: 100vh;
      /* 固定高度 */
    }

    .course-sidebar::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
      animation: rotate 30s linear infinite;
      pointer-events: none;
    }

    .course-sidebar.collapsed {
      width: 80px;
    }

    .sidebar-header {
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid rgba(102, 126, 234, 0.1);
      min-height: 80px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      position: relative;
      overflow: hidden;
    }

    .sidebar-header::after {
      content: '📚';
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 60px;
      opacity: 0.1;
    }

    .course-sidebar.collapsed .sidebar-header {
      padding: 20px 10px;
      justify-content: center;
    }

    .sidebar-title {
      color: white;
      font-size: 18px;
      font-weight: bold;
      white-space: nowrap;
      opacity: 1;
      transition: opacity 0.3s;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .course-sidebar.collapsed .sidebar-title {
      display: none;
    }

    .toggle-btn {
      background: rgba(255, 255, 255, 0.3);
      border: none;
      color: white;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      transition: all 0.3s;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .toggle-btn:hover {
      background: rgba(255, 255, 255, 0.4);
      transform: scale(1.1);
    }

    .course-list {
      flex: 1;
      padding: 15px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .course-sidebar.collapsed .course-list {
      padding: 15px 8px;
    }

    .course-item {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      border: none;
      padding: 15px;
      margin-bottom: 10px;
      border-radius: 15px;
      color: white;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
      font-weight: 600;
    }

    /* 折叠时显示课程编号 */
    .course-number {
      display: none;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
    }

    .course-sidebar.collapsed .course-number {
      display: block;
    }

    .course-text {
      display: block;
    }

    .course-sidebar.collapsed .course-text {
      display: none;
    }

    .course-sidebar.collapsed .course-item {
      padding: 12px 6px;
      text-align: center;
    }

    .course-item:hover {
      transform: translateX(5px) scale(1.02);
      box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
    }

    .course-sidebar.collapsed .course-item:hover {
      transform: translateX(0) scale(1.05);
    }

    .course-item.active {
      background: linear-gradient(135deg, #ffd93d 0%, #ff6b6b 100%);
      font-weight: bold;
      box-shadow: 0 6px 25px rgba(255, 107, 107, 0.4);
    }

    .course-item.active::before {
      content: '▶';
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;
    }

    /* 中间主区域 */
    .center-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 20px;
      position: relative;
      z-index: 1;
      height: 100vh;
      /* 固定高度 */
      overflow: hidden;
      /* 防止内容溢出 */
    }

    /* 顶部标题 - 全新设计 */
    .top-header {
      width: 100%;
      padding: 20px 0 15px;
      position: relative;
    }

    .lesson-title-container {
      background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
      padding: 18px 50px;
      border-radius: 30px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      text-align: center;
      max-width: 100%;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      border: 3px solid rgba(255, 255, 255, 0.8);
    }

    .lesson-title-container::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, #ff6b6b, #ffd93d, #4ecdc4, #45b7d1, #ff6b6b);
      border-radius: 30px;
      z-index: -1;
      animation: gradientRotate 3s linear infinite;
      opacity: 0.8;
    }

    @keyframes gradientRotate {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .lesson-title {
      font-size: 28px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 900;
      letter-spacing: 1px;
    }

    /* 主内容区域 */
    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: 15px;
      padding-bottom: 20px;
      overflow-y: auto;
      /* 允许垂直滚动 */
      overflow-x: hidden;
      /* 防止水平滚动 */
    }

    /* 板块切换区 - 胶囊设计 */
    .section-tabs {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
      padding: 8px;
      border-radius: 25px;
      display: flex;
      gap: 6px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.8);
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }

    .section-tabs::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      animation: shimmer 3s infinite;
    }

    @keyframes shimmer {
      0% {
        left: -100%;
      }

      100% {
        left: 100%;
      }
    }

    .section-tab {
      padding: 10px 25px;
      border: none;
      background: transparent;
      border-radius: 18px;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 14px;
      color: #666;
      font-weight: 600;
      position: relative;
      z-index: 1;
    }

    .section-tab:hover {
      color: #333;
      transform: translateY(-2px);
    }

    .section-tab.active {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
      transform: scale(1.05);
    }

    .section-tab.active::after {
      content: '✨';
      position: absolute;
      top: -10px;
      right: -5px;
      font-size: 20px;
      animation: sparkle 1s ease-in-out infinite;
    }

    @keyframes sparkle {

      0%,
      100% {
        transform: scale(1) rotate(0deg);
      }

      50% {
        transform: scale(1.2) rotate(180deg);
      }
    }

    /* 中央直播区 - 最大化设计 */
    .live-area {
      width: 100%;
      flex: 1;
      max-width: 1400px;
      background: #f9f8f6;
      border-radius: 25px;
      box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
      border: 4px solid transparent;
      background-clip: padding-box;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      /* 允许flex项目收缩 */
    }

    .live-area::before {
      content: '';
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: linear-gradient(45deg, #ff6b6b, #ffd93d, #4ecdc4, #45b7d1);
      border-radius: 25px;
      z-index: -1;
      animation: liveGlow 3s ease-in-out infinite;
    }

    @keyframes liveGlow {

      0%,
      100% {
        opacity: 0.8;
      }

      50% {
        opacity: 1;
      }
    }

    /* 直播区内容 */
    .live-content {
      width: 100%;
      height: 100%;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* 字根学习板块样式 - 更丰富的色彩 */
    .hanzi-display {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 30px;
      gap: 20px;
      background: linear-gradient(135deg, #fff5f5 0%, #fef3ff 50%, #f0f8ff 100%);
      position: relative;
      overflow: hidden;
    }

    /* 装饰性背景元素 */
    .hanzi-display::before {
      content: '';
      position: absolute;
      top: -100px;
      right: -100px;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(255, 182, 193, 0.3) 0%, transparent 70%);
      border-radius: 50%;
      animation: float 6s ease-in-out infinite;
    }

    .hanzi-display::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -80px;
      width: 250px;
      height: 250px;
      background: radial-gradient(circle, rgba(173, 216, 230, 0.3) 0%, transparent 70%);
      border-radius: 50%;
      animation: float 8s ease-in-out infinite reverse;
    }

    /* 主字展示区 - 更鲜艳 */
    .main-char-section {
      display: flex;
      gap: 40px;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .char-display {
      text-align: center;
      position: relative;
    }

    .big-char {
      font-size: 260px;
      line-height: 1;
      font-weight: 900;
      margin-bottom: 20px;
      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ffd93d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 10px 20px rgba(255, 107, 107, 0.2);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }
    }

    .char-info {
      display: flex;
      gap: 25px;
      justify-content: center;
      font-size: 22px;
    }

    .char-info-item {
      display: flex;
      align-items: center;
      gap: 8px;
      background: white;
      padding: 12px 25px;
      border-radius: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
    }

    .char-info-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .char-info-label {
      color: #666;
      font-size: 18px;
    }

    .char-info-value {
      font-weight: bold;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* 字根详情 - 彩色卡片 */
    .char-details {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 25px;
      padding: 35px;
      min-width: 380px;
      color: white;
      box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
      position: relative;
      overflow: hidden;
    }

    .char-details::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
      animation: rotate 20s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .detail-section {
      margin-bottom: 25px;
      position: relative;
      z-index: 1;
    }

    .detail-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .detail-content {
      font-size: 18px;
      line-height: 1.8;
      background: rgba(255, 255, 255, 0.15);
      padding: 15px;
      border-radius: 15px;
      backdrop-filter: blur(10px);
    }

    /* 象形文字展示 - 更活泼 */
    .xiangxing-display {
      width: 100%;
      height: 100%;
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 50%, #f39c12 100%);
      position: relative;
    }

    .evolution-title {
      text-align: center;
      font-size: 36px;
      color: #2d3436;
      font-weight: 900;
      margin-bottom: 10px;
      text-shadow: 3px 3px 0px #f39c12, 6px 6px 0px rgba(0, 0, 0, 0.1);
    }

    .evolution-stages {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      height: calc(100% - 80px);
      align-items: center;
    }

    .evolution-item {
      text-align: center;
      background: white;
      padding: 25px;
      border-radius: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      transition: all 0.3s;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .evolution-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
      transform: scaleX(0);
      transition: transform 0.3s;
    }

    .evolution-item:hover::before {
      transform: scaleX(1);
    }

    .evolution-item:hover {
      transform: translateY(-8px) scale(1.05);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    }

    .evolution-char {
      font-size: 100px;
      margin-bottom: 15px;
      color: #2d3436;
      min-height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .evolution-label {
      font-size: 22px;
      color: #ff6b6b;
      font-weight: 700;
      margin-bottom: 10px;
    }

    /* 释义解析展示 - 单页优化 */
    .shiyi-display {
      width: 100%;
      height: 100%;
      padding: 30px;
      background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 25px;
    }

    .shiyi-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .shiyi-right {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .shiyi-section {
      background: white;
      border-radius: 25px;
      padding: 25px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .shiyi-title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #00acc1;
    }

    .shiyi-content {
      font-size: 18px;
      line-height: 1.8;
      color: #333;
      flex: 1;
    }

    .word-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .word-item {
      background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
      padding: 12px 20px;
      border-radius: 20px;
      font-size: 18px;
      color: white;
      font-weight: 600;
      text-align: center;
      transition: all 0.3s;
      box-shadow: 0 4px 15px rgba(41, 182, 246, 0.3);
    }

    .word-item:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 6px 20px rgba(41, 182, 246, 0.4);
    }

    .sentence-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .sentence-item {
      background: linear-gradient(to right, #e3f2fd, #f3e5f5);
      padding: 15px 20px;
      border-radius: 15px;
      font-size: 17px;
      color: #333;
      border-left: 5px solid #7366f1;
      transition: all 0.3s;
    }

    .sentence-item:hover {
      transform: translateX(5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* 练习题目展示 - 卡片切换效果 */
    .practice-display {
      width: 100%;
      height: 100%;
      padding: 30px;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .practice-header {
      text-align: center;
      margin-bottom: 30px;
      z-index: 2;
    }

    .practice-title {
      font-size: 36px;
      color: white;
      font-weight: 900;
      margin-bottom: 10px;
      text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    }

    .practice-subtitle {
      font-size: 20px;
      color: rgba(255, 255, 255, 0.9);
    }

    /* 题目卡片容器 */
    .question-carousel {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1000px;
    }

    .question-card {
      position: absolute;
      width: 90%;
      max-width: 700px;
      background: white;
      border-radius: 30px;
      padding: 40px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      cursor: grab;
    }

    .question-card.active {
      transform: translateX(0) scale(1);
      opacity: 1;
      z-index: 10;
    }

    .question-card.prev {
      transform: translateX(-120%) scale(0.8) rotateY(45deg);
      opacity: 0;
      z-index: 5;
    }

    .question-card.next {
      transform: translateX(120%) scale(0.8) rotateY(-45deg);
      opacity: 0;
      z-index: 5;
    }

    .question-number {
      font-size: 18px;
      color: #f5576c;
      margin-bottom: 15px;
      font-weight: bold;
    }

    .question-text {
      font-size: 26px;
      color: #333;
      margin-bottom: 30px;
      font-weight: 600;
    }

    .answer-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .answer-option {
      padding: 20px 30px;
      border: 3px solid #e0e0e0;
      border-radius: 20px;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      font-weight: 600;
    }

    .answer-option:hover {
      border-color: #f093fb;
      background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
      transform: scale(1.05);
    }

    .answer-option.selected {
      border-color: #f5576c;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
      transform: scale(1.05);
    }

    .answer-option.correct {
      border-color: #4caf50;
      background: linear-gradient(135deg, #81c784 0%, #4caf50 100%);
      color: white;
      animation: bounce 0.5s;
    }

    .answer-option.wrong {
      border-color: #f44336;
      background: linear-gradient(135deg, #ef5350 0%, #f44336 100%);
      color: white;
      animation: shake 0.5s;
    }

    @keyframes bounce {

      0%,
      100% {
        transform: scale(1.05);
      }

      50% {
        transform: scale(1.15);
      }
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-10px);
      }

      75% {
        transform: translateX(10px);
      }
    }

    /* 卡片切换控制 */
    .card-nav {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 20px;
      z-index: 20;
    }

    .card-nav-btn {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: none;
      background: white;
      color: #f5576c;
      font-size: 24px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }

    .card-nav-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

    .card-nav-btn:active {
      transform: translateY(-1px);
    }

    /* 进度指示器 */
    .progress-dots {
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 20;
    }

    .progress-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      transition: all 0.3s;
    }

    .progress-dot.active {
      width: 30px;
      border-radius: 6px;
      background: white;
    }

    /* 右侧AI讲稿区 - 现代化设计 */
    .ai-sidebar {
      width: 380px;
      background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
      display: flex;
      flex-direction: column;
      box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
      border-radius: 30px 0 0 30px;
      overflow: hidden;
      position: relative;
      height: 100vh;
      /* 固定高度为视口高度 */
      max-height: 100vh;
      /* 限制最大高度 */
    }

    .ai-sidebar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
      pointer-events: none;
    }

    .ai-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 25px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }

    .ai-header::after {
      content: '';
      position: absolute;
      bottom: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
      animation: rotate 20s linear infinite;
    }

    .ai-header span {
      position: relative;
      z-index: 1;
    }

    .generate-btn {
      margin: 20px;
      padding: 15px;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
      border: none;
      border-radius: 15px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s;
      font-weight: 700;
      box-shadow: 0 5px 20px rgba(245, 87, 108, 0.3);
      position: relative;
      overflow: hidden;
    }

    .generate-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s;
    }

    .generate-btn:hover::before {
      left: 100%;
    }

    .generate-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(245, 87, 108, 0.4);
    }

    .generate-btn:active {
      transform: translateY(-1px);
    }

    .ai-content {
      flex: 1;
      padding: 25px;
      overflow-y: auto;
      color: #333;
      line-height: 1.8;
      font-size: 15px;
      position: relative;
      z-index: 1;
    }

    .ai-content h3 {
      color: #667eea;
      margin-bottom: 15px;
      font-size: 20px;
      border-bottom: 3px solid #e8e8ff;
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ai-content p {
      margin-bottom: 15px;
      background: rgba(102, 126, 234, 0.05);
      padding: 12px;
      border-radius: 10px;
      border-left: 4px solid #667eea;
    }

    .ai-content strong {
      color: #764ba2;
      font-weight: 700;
    }

    /* 欢迎页面 - 调整避免遮挡 */
    .welcome-screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f9f8f6 0%, #fff 50%, #f0f0ff 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 100;
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 25px;
      overflow: hidden;
    }

    .welcome-screen.hide {
      opacity: 0;
      transform: scale(1.1);
      pointer-events: none;
    }

    /* 课程信息 */
    .lesson-info {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(99, 102, 241, 0.1);
      padding: 8px 25px;
      border-radius: 25px;
      color: #5b4cdb;
      font-size: 16px;
      font-weight: 600;
    }

    .welcome-logo {
      font-size: 120px;
      margin-bottom: 15px;
      animation: float 3s ease-in-out infinite;
      filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-20px);
      }
    }

    .welcome-title {
      font-size: 56px;
      background: linear-gradient(135deg, #5b4cdb 0%, #7366f1 50%, #ff4757 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 15px;
      font-weight: 900;
      letter-spacing: -2px;
    }

    .welcome-subtitle {
      font-size: 22px;
      color: #666;
      margin-bottom: 40px;
      letter-spacing: 2px;
    }

    .start-btn {
      padding: 15px 60px;
      font-size: 20px;
      background: linear-gradient(135deg, #5b4cdb 0%, #7366f1 100%);
      color: white;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 12px 30px rgba(99, 102, 241, 0.4);
      font-weight: 600;
      letter-spacing: 1px;
    }

    .start-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
    }

    /* 大屏幕优化 */
    @media (min-width: 2000px) {
      .big-char {
        font-size: 320px;
      }

      .evolution-char {
        font-size: 120px;
      }

      .welcome-logo {
        font-size: 180px;
      }

      .welcome-title {
        font-size: 72px;
      }

      .ai-sidebar {
        width: 420px;
      }

      .course-sidebar {
        width: 240px;
      }

      .live-area {
        max-width: 1600px;
      }
    }

    /* 响应式调整 */
    @media (max-width: 1600px) {
      .ai-sidebar {
        width: 340px;
      }

      .live-area {
        max-width: 1200px;
      }

      .course-sidebar {
        width: 180px;
      }

      .section-tab {
        padding: 8px 20px;
        font-size: 13px;
      }

      .selector-btn {
        width: 85px;
        height: 85px;
        font-size: 11px;
      }

      .selector-icon {
        font-size: 32px;
      }

      .icon-box {
        width: 32px;
        height: 32px;
        font-size: 18px;
      }
    }

    /* 滚动条样式 - 更美观 */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    }

    /* AI内容区域滚动条 */
    .ai-content::-webkit-scrollbar {
      width: 6px;
    }

    .ai-content::-webkit-scrollbar-thumb {
      background: rgba(99, 102, 241, 0.3);
    }

    .ai-content::-webkit-scrollbar-thumb:hover {
      background: rgba(99, 102, 241, 0.5);
    }

    /* 课程列表滚动条 */
    .course-list::-webkit-scrollbar {
      width: 4px;
    }

    .course-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
    }

    .course-list::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }

    /* 内容选择卡容器 - 固定在底部 */
    .content-selector {
      display: flex;
      gap: 15px;
      padding: 15px 25px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
      backdrop-filter: blur(20px);
      border-radius: 25px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.8);
      position: relative;
      margin-top: auto;
      flex-shrink: 0;
      margin-bottom: 10px;
      /* 添加底部边距 */
    }

    .content-selector::before {
      content: '✨';
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      animation: float 3s ease-in-out infinite;
    }

    /* 选择卡按钮 - 3D效果 */
    .selector-btn {
      width: 95px;
      height: 95px;
      border: none;
      border-radius: 20px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.1),
        inset 0 -3px 5px rgba(0, 0, 0, 0.1);
      color: #333;
      font-size: 12px;
      font-weight: 600;
      position: relative;
      transform-style: preserve-3d;
    }

    .selector-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 20px;
      background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.5) 100%);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .selector-btn:hover {
      transform: translateY(-6px) rotateX(-10deg);
      box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.15),
        inset 0 -3px 5px rgba(0, 0, 0, 0.1);
    }

    .selector-btn:hover::before {
      opacity: 1;
    }

    .selector-btn.active {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow:
        0 10px 30px rgba(102, 126, 234, 0.4),
        inset 0 -3px 5px rgba(0, 0, 0, 0.2);
      transform: translateY(-4px) scale(1.05);
    }

    .selector-btn.active::after {
      content: '⭐';
      position: absolute;
      top: -8px;
      right: -8px;
      font-size: 20px;
      animation: bounce 0.5s ease-in-out;
    }

    /* 图标样式 - 更大更醒目 */
    .selector-icon {
      font-size: 36px;
      margin-bottom: 4px;
      font-weight: bold;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    /* 特殊图标样式 - 渐变背景 */
    .icon-box {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
      margin-bottom: 4px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .tree-icon {
      background: linear-gradient(135deg, #4caf50, #8bc34a);
    }

    .edit-icon {
      background: linear-gradient(135deg, #ff9800, #ffc107);
    }

    .practice-icon {
      background: linear-gradient(135deg, #f44336, #ff5722);
    }

    .generate-btn:active {
      transform: translateY(-1px);
    }

    .btn {
      padding: 8px 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-decoration: none;
      position: relative;
      overflow: hidden;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
    }

    .btn:hover::before {
      left: 100%;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .btn-secondary {
      background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
      color: white;
    }

    .btn-info {
      background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
      color: white;
    }

    /* 工具栏按钮样式 */
    .toolbar-btn {
      padding: 6px 12px;
      border: 1px solid #ddd;
      background: white;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .toolbar-btn:hover {
      background: #f8f9fa;
      border-color: #667eea;
      transform: translateY(-1px);
    }

    .toolbar-btn:active {
      background: #e9ecef;
    }

    .toolbar-btn.active {
      background: #667eea;
      color: white;
      border-color: #667eea;
    }

    /* 编辑模式样式 */
    .ai-content[contenteditable="true"] {
      border: 2px dashed #667eea;
      background: rgba(102, 126, 234, 0.02);
      outline: none;
    }

    .ai-content[contenteditable="true"]:focus {
      border-color: #764ba2;
      background: rgba(102, 126, 234, 0.05);
    }
  </style>
</head>

<body>
  <!-- 左侧课表 -->
  <div class="course-sidebar" id="courseSidebar">
    <div class="sidebar-header">
      <h2 class="sidebar-title">课程列表</h2>
      <button class="toggle-btn" onclick="toggleSidebar()">◀</button>
    </div>
    <div class="course-list">
      <!-- 课程列表将通过JavaScript动态加载 -->
    </div>
  </div>

  <!-- 中间主区域 -->
  <div class="center-area">
    <!-- 顶部标题 -->
    <div class="top-header">
      <div class="lesson-title-container">
        <h1 class="lesson-title">第1课：认识木字</h1>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 板块切换 -->
      <div class="section-tabs">
        <button class="section-tab active" onclick="switchSection(1)">字根学习</button>
        <button class="section-tab" onclick="switchSection(2)">偏旁笔画</button>
        <button class="section-tab" onclick="switchSection(3)">书写讲解</button>
        <button class="section-tab" onclick="switchSection(4)">拖拽组合</button>
        <button class="section-tab" onclick="switchSection(5)">游戏巩固</button>
      </div>

      <!-- 中央直播区 -->
      <div class="live-area">
        <div class="live-content" id="liveContent">
          <!-- 实际教学内容将在这里 -->
        </div>

        <!-- 欢迎页面 -->
        <div class="welcome-screen" id="welcomeScreen">
          <div class="lesson-info">第1课：认识木字</div>
          <div class="welcome-logo">📚</div>
          <h1 class="welcome-title">岚小字识字</h1>
          <p class="welcome-subtitle">让汉字学习充满乐趣</p>
          <button class="start-btn" onclick="startTeaching()">开始教学</button>
        </div>
      </div>

      <!-- 内容选择卡 -->
      <div class="content-selector">
        <button class="selector-btn active" onclick="selectContent('hanzi')">
          <div class="selector-icon">木</div>
          <span>汉字展示</span>
        </button>

        <button class="selector-btn" onclick="selectContent('xiangxing')">
          <div class="icon-box tree-icon">🌳</div>
          <span>象形图片</span>
        </button>

        <button class="selector-btn" onclick="selectContent('shiyi')">
          <div class="icon-box edit-icon">📝</div>
          <span>释义解析</span>
        </button>

        <button class="selector-btn" onclick="selectContent('lianxi')">
          <div class="icon-box practice-icon">✏️</div>
          <span>练习题目</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 右侧讲课稿查看区 -->
  <div class="ai-sidebar">
    <div class="ai-header">
      <span>📖</span>
      <span>讲课稿查看器</span>
    </div>

    <!-- 简化工具栏 - 仅只读功能 -->
    <div class="toolbar" style="padding: 15px 20px; border-bottom: 1px solid #e5e7eb; background: #f8f9fa;">
      <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
        <button class="toolbar-btn" onclick="refreshScript()" title="刷新内容" style="background: #28a745; color: white;">
          🔄 刷新内容
        </button>
        <div style="width: 1px; height: 20px; background: #ddd;"></div>
        <button class="toolbar-btn" onclick="openBackendEditor()" title="在后端编辑"
          style="background: #667eea; color: white;">
          ✏️ 后端编辑
        </button>
        <div style="width: 1px; height: 20px; background: #ddd;"></div>
        <span
          style="font-size: 12px; color: #666; padding: 6px 8px; background: #f8f9fa; border-radius: 4px; border: 1px solid #e5e7eb;"
          id="lastUpdateInfo">最后更新: 未知</span>
      </div>
    </div>

    <div class="ai-content" id="aiContent">
      <p style="color: #999; text-align: center; margin-top: 50px;">选择课程和模块查看讲课稿...</p>
    </div>
  </div>

  <!-- 添加API脚本 -->
  <script src="js/api/course-catalog.js"></script>

  <script>
    let currentSection = 1;
    let currentLesson = 1;
    let sidebarCollapsed = false;
    let currentCourseNumber = '001';  // 当前课程编号
    let courseList = [];  // 课程列表缓存

    // 缓存字根数据
    let charactersCache = {};
    let practiceQuestionsCache = {};

    // 从后端API获取字根数据
    async function getCharacterData(char) {
      // 检查缓存
      if (charactersCache[char]) {
        return charactersCache[char];
      }

      try {
        const response = await fetch(`http://localhost:3002/api/characters/by-char/${char}`);
        const data = await response.json();

        if (data.success) {
          // 缓存数据
          charactersCache[char] = data.data;
          return data.data;
        } else {
          console.error('获取字根数据失败:', data.error);
          return null;
        }
      } catch (error) {
        console.error('获取字根数据出错:', error);
        return null;
      }
    }

    // 从后端API获取练习题数据
    async function getPracticeQuestions(char) {
      // 检查缓存
      if (practiceQuestionsCache[char]) {
        return practiceQuestionsCache[char];
      }

      try {
        // 首先获取字根ID
        const charData = await getCharacterData(char);
        if (!charData || !charData.id) {
          return [];
        }

        const response = await fetch(`http://localhost:3002/api/practice-questions/character/${charData.id}`);
        const data = await response.json();

        if (data.success && data.data) {
          // 缓存数据
          practiceQuestionsCache[char] = data.data;
          return data.data;
        } else {
          console.log('暂无练习题数据');
          return [];
        }
      } catch (error) {
        console.error('获取练习题出错:', error);
        return [];
      }
    }

    // 页面加载时获取课程列表
    window.addEventListener('DOMContentLoaded', async () => {
      await loadCourseList();
    });

    // 加载课程列表
    async function loadCourseList() {
      try {
        const response = await CourseCatalogAPI.getCourses({ limit: 50 });
        if (response.success) {
          // 后端返回的数据结构：{ success: true, data: [...], message: "" }
          // 其中 data 是课程数组，不是 { courses: [...] }
          courseList = response.data; // 直接使用 data 数组
          renderCourseList(courseList);

          // 默认选中第一个课程
          if (courseList.length > 0) {
            selectCourse(courseList[0].lesson_number); // 使用 lesson_number 字段
          }
        }
      } catch (error) {
        console.error('加载课程列表失败:', error);
      }
    }

    // 渲染课程列表
    function renderCourseList(courses) {
      const courseListEl = document.querySelector('.course-list');
      courseListEl.innerHTML = courses.map((course, index) => `
        <div class="course-item ${index === 0 ? 'active' : ''}" 
             data-course-number="${course.lesson_number}"
             onclick="selectCourse('${course.lesson_number}')">
          <span class="course-number">${course.lesson_number}</span>
          <span class="course-text">${course.course_name}</span>
        </div>
      `).join('');
    }

    // 选择课程
    async function selectCourse(courseNumber) {
      currentCourseNumber = courseNumber;

      // 更新UI
      document.querySelectorAll('.course-item').forEach(item => {
        item.classList.toggle('active', item.dataset.courseNumber === courseNumber);
      });

      // 获取课程详情
      try {
        const response = await CourseCatalogAPI.getCourseDetail(courseNumber);
        if (response.success) {
          const course = response.data;

          // 更新标题 - 使用正确的字段名
          document.querySelector('.lesson-title').textContent = course.course_title || course.course_name;

          // 更新汉字展示按钮 - 使用正确的字段名
          document.querySelector('.selector-icon').textContent = course.target_char || course.character;

          // 更新欢迎页面的课程信息
          const lessonInfo = document.querySelector('.lesson-info');
          if (lessonInfo) {
            lessonInfo.textContent = course.course_title || course.course_name;
          }

          // 加载已保存的AI讲稿（如果有）
          loadSavedScript();
        }
      } catch (error) {
        console.error('获取课程详情失败:', error);
      }
    }

    // 加载已保存的AI讲稿
    async function loadSavedScript() {
      // 前端到后端的模块类型映射
      const moduleMapping = {
        'root_learning': 'character_learning',      // 字根学习
        'component_stroke': 'radical_strokes',      // 偏旁笔画  
        'writing_guide': 'writing_guide',           // 书写讲解
        'drag_compose': 'combination_drag',         // 拖拽组合
        'game_practice': 'game_consolidation'       // 游戏巩固
      };

      const sectionTypes = ['root_learning', 'component_stroke', 'writing_guide', 'drag_compose', 'game_practice'];
      const frontendModuleType = sectionTypes[currentSection - 1];
      const backendModuleType = moduleMapping[frontendModuleType]; // 使用映射后的模块类型
      const aiContent = document.getElementById('aiContent');

      // 显示加载状态
      aiContent.innerHTML = `
        <div style="text-align: center; padding: 30px;">
          <div style="font-size: 32px; margin-bottom: 15px; animation: spin 2s linear infinite;">⚙️</div>
          <p style="color: #667eea;">正在加载讲课稿...</p>
        </div>
        <style>
          @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
        </style>
      `;

      try {
        console.log(`尝试加载讲课稿: 课程${currentCourseNumber}, 模块${backendModuleType}`);

        // 超强防缓存策略
        const timestamp = new Date().getTime();
        const randomParam = Math.random().toString(36).substring(7);
        const sessionParam = sessionStorage.getItem('sessionId') || Math.random().toString(36).substring(7);
        sessionStorage.setItem('sessionId', sessionParam);

        // 清除相关缓存
        if ('caches' in window) {
          caches.keys().then(function (names) {
            for (let name of names) {
              if (name.includes('api') || name.includes('scripts')) {
                caches.delete(name);
              }
            }
          });
        }

        const response = await fetch(`http://localhost:3002/api/course-catalog/${currentCourseNumber}/scripts?moduleType=${backendModuleType}&_t=${timestamp}&_r=${randomParam}&_s=${sessionParam}&_cache_bust=${Date.now()}`, {
          method: 'GET',
          headers: {
            'Cache-Control': 'no-cache, no-store, must-revalidate',
            'Pragma': 'no-cache',
            'Expires': '0',
            'X-Requested-With': 'XMLHttpRequest'
          },
          cache: 'no-store'
        });

        console.log('API响应状态:', response.status);

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();
        console.log('API返回数据:', data);

        if (data.success && data.data && data.data.script_content) {
          console.log('✅ 成功获取讲课稿内容');

          // 清理HTML状态框内容
          let cleanContent = data.data.script_content;

          // 移除各种绿色状态框的HTML
          cleanContent = cleanContent.replace(/<div[^>]*class="[^"]*save-status[^"]*"[^>]*>.*?<\/div>/gs, '');
          cleanContent = cleanContent.replace(/<div[^>]*style="[^"]*background[^"]*green[^"]*"[^>]*>.*?<\/div>/gs, '');
          cleanContent = cleanContent.replace(/已加载保存的讲课稿/g, '');
          cleanContent = cleanContent.replace(/<div[^>]*已保存[^>]*>.*?<\/div>/gs, '');

          // 移除空的div标签
          cleanContent = cleanContent.replace(/<div[^>]*>\s*<\/div>/g, '');
          cleanContent = cleanContent.trim();

          // 显示清理后的内容
          aiContent.innerHTML = `
            <div style="padding: 20px; line-height: 1.8; font-size: 16px; color: #333;">
              ${cleanContent}
            </div>
            <div style="text-align: right; padding: 15px; border-top: 1px solid #eee; color: #666; font-size: 12px;">
              <span>📅 最后更新: ${new Date(data.data.updated_at).toLocaleString()}</span>
              <span style="margin-left: 15px;">📊 字数: ${(data.data.script_content.replace(/<[^>]*>/g, '').length)}字</span>
            </div>
          `;

          updateLastUpdateTime(new Date().toLocaleTimeString());
          showMessage('讲课稿加载成功', 'success');

        } else {
          console.log('⚠️ 未找到讲课稿内容');
          aiContent.innerHTML = `
            <div style="text-align: center; padding: 50px; color: #666;">
              <div style="font-size: 48px; margin-bottom: 20px;">📄</div>
              <h3>暂无讲课稿</h3>
              <p style="margin-bottom: 20px;">该模块还没有生成讲课稿内容</p>
              <p style="font-size: 14px; color: #999;">请在后端管理系统中生成讲课稿</p>
            </div>
          `;
        }
      } catch (error) {
        console.error('加载讲课稿失败:', error);
        aiContent.innerHTML = `
          <div style="text-align: center; padding: 50px; color: #e74c3c;">
            <div style="font-size: 48px; margin-bottom: 20px;">❌</div>
            <h3>加载失败</h3>
            <p style="margin-bottom: 20px;">无法加载讲课稿内容</p>
            <p style="font-size: 14px; color: #666;">错误: ${error.message}</p>
            <button onclick="loadSavedScript()" style="margin-top: 20px; padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 6px; cursor: pointer;">
              🔄 重试
            </button>
          </div>
        `;
        showMessage('加载讲课稿失败: ' + error.message, 'error');
      }
    }

    // 切换侧边栏
    function toggleSidebar() {
      const sidebar = document.getElementById('courseSidebar');
      const toggleBtn = document.querySelector('.toggle-btn');
      sidebarCollapsed = !sidebarCollapsed;

      if (sidebarCollapsed) {
        sidebar.classList.add('collapsed');
        toggleBtn.innerHTML = '▶';
      } else {
        sidebar.classList.remove('collapsed');
        toggleBtn.innerHTML = '◀';
      }
    }

    // 开始教学
    function startTeaching() {
      document.getElementById('welcomeScreen').classList.add('hide');
      // 默认显示汉字展示
      selectContent('hanzi');
    }

    // 切换板块
    function switchSection(section) {
      currentSection = section;

      // 更新tab状态
      document.querySelectorAll('.section-tab').forEach((tab, index) => {
        tab.classList.toggle('active', index + 1 === section);
      });

      console.log('切换到板块：', section);

      // 加载该板块的已保存讲稿
      loadSavedScript();

      // 重置内容选择到第一个按钮并加载对应内容
      if (section === 1) {
        // 字根学习
        selectContent('hanzi');
      } else if (section === 2) {
        // 偏旁笔画 - 加载独立页面到直播区
        loadComponentStrokesView();
      } else if (section === 3) {
        // 书写讲解
        selectContent('writing');
      } else if (section === 4) {
        // 拖拽组合
        selectContent('dragdrop');
      } else if (section === 5) {
        // 游戏巩固
        selectContent('game');
      }
    }

    // 加载偏旁笔画视图
    function loadComponentStrokesView() {
      const liveContent = document.getElementById('liveContent');
      const currentChar = document.querySelector('.selector-icon').textContent;

      // 使用iframe加载独立页面
      liveContent.innerHTML = `
        <iframe 
          src="components-strokes-view.html" 
          style="width:100%; height:100%; border:none; border-radius:25px;" 
          id="componentsFrame"
          title="偏旁笔画"></iframe>
      `;

      // 清空内容选择器的active状态
      document.querySelectorAll('.selector-btn').forEach(btn => {
        btn.classList.remove('active');
      });

      // 在iframe加载完成后传递当前字符信息
      const iframe = document.getElementById('componentsFrame');
      iframe.onload = function () {
        try {
          // 尝试直接设置iframe内部的currentChar变量
          if (iframe.contentWindow) {
            iframe.contentWindow.currentChar = currentChar;
            // 调用iframe中的初始化函数
            if (typeof iframe.contentWindow.updateComponentDisplay === 'function') {
              iframe.contentWindow.updateComponentDisplay(currentChar);
            }
          }
        } catch (e) {
          console.error('无法设置iframe内容:', e);
        }
      };
    }

    // 选择内容类型
    async function selectContent(type) {
      // 移除所有active类
      document.querySelectorAll('.selector-btn').forEach(btn => {
        btn.classList.remove('active');
      });

      // 添加active类到当前按钮
      if (event && event.currentTarget) {
        event.currentTarget.classList.add('active');
      } else {
        // 程序调用时，根据type找到对应按钮
        document.querySelectorAll('.selector-btn').forEach(btn => {
          if (btn.onclick && btn.onclick.toString().includes(`'${type}'`)) {
            btn.classList.add('active');
          }
        });
      }

      console.log('选择了：', type);

      const liveContent = document.getElementById('liveContent');

      // 只在字根学习板块时显示内容
      if (currentSection === 1) {
        const currentChar = document.querySelector('.selector-icon').textContent;

        switch (type) {
          case 'hanzi':
            await showHanziDisplay(liveContent, currentChar);
            break;
          case 'xiangxing':
            await showXiangxingDisplay(liveContent, currentChar);
            break;
          case 'shiyi':
            await showShiyiDisplay(liveContent, currentChar);
            break;
          case 'lianxi':
            await showPracticeDisplay(liveContent, currentChar);
            break;
        }
      }
    }

    // 显示汉字展示 - 使用真实数据
    async function showHanziDisplay(container, char) {
      // 显示加载状态
      container.innerHTML = `
        <div class="hanzi-display">
          <div style="text-align: center; padding: 100px;">
            <div style="font-size: 48px; margin-bottom: 20px;">⏳</div>
            <p>正在加载字根数据...</p>
          </div>
        </div>
      `;

      try {
        const data = await getCharacterData(char);

        if (!data) {
          // 如果没有找到数据，显示默认信息
          container.innerHTML = `
            <div class="hanzi-display">
              <div class="main-char-section">
                <div class="char-display">
                  <div class="big-char">${char}</div>
                  <div class="char-info">
                    <div class="char-info-item">
                      <span class="char-info-label">拼音:</span>
                      <span class="char-info-value">待补充</span>
                    </div>
                    <div class="char-info-item">
                      <span class="char-info-label">笔画:</span>
                      <span class="char-info-value">待补充</span>
                    </div>
                    <div class="char-info-item">
                      <span class="char-info-label">部首:</span>
                      <span class="char-info-value">待补充</span>
                    </div>
                  </div>
                </div>
                
                <div class="char-details">
                  <div class="detail-section">
                    <div class="detail-title">
                      <span>📖</span>
                      <span>基本含义</span>
                    </div>
                    <div class="detail-content">该字根暂未录入数据库，请在数据管理中心添加。</div>
                  </div>
                </div>
              </div>
            </div>
          `;
          return;
        }

        // 使用真实数据渲染
        container.innerHTML = `
          <div class="hanzi-display">
            <div class="main-char-section">
              <div class="char-display">
                <div class="big-char">${char}</div>
                <div class="char-info">
                  <div class="char-info-item">
                    <span class="char-info-label">拼音:</span>
                    <span class="char-info-value">${data.pinyin || '待补充'}</span>
                  </div>
                  <div class="char-info-item">
                    <span class="char-info-label">笔画:</span>
                    <span class="char-info-value">${data.stroke_count ? data.stroke_count + '画' : '待补充'}</span>
                  </div>
                  <div class="char-info-item">
                    <span class="char-info-label">部首:</span>
                    <span class="char-info-value">${data.radical || '待补充'}</span>
                  </div>
                  ${data.pictograph_image ? `
                  <div class="char-info-item">
                    <span class="char-info-label">象形:</span>
                    <span class="char-info-value" style="font-size: 24px;">${data.pictograph_image}</span>
                  </div>
                  ` : ''}
                </div>
              </div>
              
              <div class="char-details">
                <div class="detail-section">
                  <div class="detail-title">
                    <span>📖</span>
                    <span>基本含义</span>
                  </div>
                  <div class="detail-content">${data.meaning || '暂无基本含义'}</div>
                </div>
                
                ${data.extended_meaning ? `
                <div class="detail-section">
                  <div class="detail-title">
                    <span>🌟</span>
                    <span>扩展含义</span>
                  </div>
                  <div class="detail-content">${data.extended_meaning}</div>
                </div>
                ` : ''}
                
                <div class="detail-section">
                  <div class="detail-title">
                    <span>🎨</span>
                    <span>字形特征</span>
                  </div>
                  <div class="detail-content">${data.shape_characteristics || '暂无字形特征描述'}</div>
                </div>
                
                <div class="detail-section">
                  <div class="detail-title">
                    <span>💡</span>
                    <span>记忆技巧</span>
                  </div>
                  <div class="detail-content">${data.memory_tips || '暂无记忆技巧'}</div>
                </div>
              </div>
            </div>
          </div>
        `;
      } catch (error) {
        console.error('显示字根数据出错:', error);
        container.innerHTML = `
          <div class="hanzi-display">
            <div style="text-align: center; padding: 100px;">
              <div style="font-size: 48px; margin-bottom: 20px;">❌</div>
              <p>加载字根数据失败</p>
              <p style="color: #999; margin-top: 10px;">请检查后端服务是否启动</p>
            </div>
          </div>
        `;
      }
    }

    // 显示象形文字演变 - 使用真实数据
    async function showXiangxingDisplay(container, char) {
      container.innerHTML = `
        <div class="xiangxing-display">
          <div style="text-align: center; padding: 100px;">
            <div style="font-size: 48px; margin-bottom: 20px;">⏳</div>
            <p>正在加载演变数据...</p>
          </div>
        </div>
      `;

      try {
        const data = await getCharacterData(char);

        // 获取象形图片和字源故事
        const pictographImage = data?.pictograph_image || char;
        const originStory = data?.origin_story || '暂无字源故事';

        // 生成演变数据（如果有完整的演变数据可以从后端获取）
        const stages = [
          { stage: '甲骨文', char: pictographImage, desc: '最早的文字形式' },
          { stage: '金文', char: char, desc: '青铜器上的文字' },
          { stage: '小篆', char: char, desc: '秦朝统一文字' },
          { stage: '楷书', char: char, desc: '现代标准写法' }
        ];

        container.innerHTML = `
          <div class="xiangxing-display">
            <h2 class="evolution-title">"${char}"字的演变历程</h2>
            <div class="evolution-stages">
              ${stages.map(item => `
                <div class="evolution-item">
                  <div class="evolution-char">${item.char}</div>
                  <div class="evolution-label">${item.stage}</div>
                  <div class="detail-content">${item.desc}</div>
                </div>
              `).join('')}
            </div>
            ${originStory !== '暂无字源故事' ? `
            <div style="margin-top: 30px; padding: 20px; background: rgba(255,255,255,0.9); border-radius: 15px;">
              <h3 style="color: #ff6b6b; margin-bottom: 15px;">📜 字源故事</h3>
              <p style="font-size: 18px; line-height: 1.6; color: #333;">${originStory}</p>
            </div>
            ` : ''}
          </div>
        `;
      } catch (error) {
        console.error('显示演变数据出错:', error);
        container.innerHTML = `
          <div class="xiangxing-display">
            <div style="text-align: center; padding: 100px;">
              <div style="font-size: 48px; margin-bottom: 20px;">❌</div>
              <p>加载演变数据失败</p>
            </div>
          </div>
        `;
      }
    }

    // 显示释义解析 - 使用真实数据
    async function showShiyiDisplay(container, char) {
      container.innerHTML = `
        <div class="shiyi-display">
          <div style="text-align: center; padding: 100px;">
            <div style="font-size: 48px; margin-bottom: 20px;">⏳</div>
            <p>正在加载释义数据...</p>
          </div>
        </div>
      `;

      try {
        const data = await getCharacterData(char);

        if (!data) {
          container.innerHTML = `
            <div class="shiyi-display">
              <div style="text-align: center; padding: 100px;">
                <div style="font-size: 48px; margin-bottom: 20px;">📝</div>
                <p>暂无释义数据</p>
              </div>
            </div>
          `;
          return;
        }

        // 处理词组数据
        const words = data.vocabulary_examples ?
          data.vocabulary_examples.split(',').map(w => w.trim()).filter(w => w) : [];

        // 处理例句数据
        const sentences = data.example_sentences ?
          data.example_sentences.split('||').map(s => s.trim()).filter(s => s) : [];

        container.innerHTML = `
          <div class="shiyi-display">
            <div class="shiyi-left">
              ${data.extended_meaning ? `
              <div class="shiyi-section">
                <div class="shiyi-title">
                  <span>🌟</span>
                  <span>扩展含义</span>
                </div>
                <div class="shiyi-content">${data.extended_meaning}</div>
              </div>
              ` : ''}
              
              ${words.length > 0 ? `
              <div class="shiyi-section">
                <div class="shiyi-title">
                  <span>🔤</span>
                  <span>常用组词</span>
                </div>
                <div class="word-list">
                  ${words.map(word => `<div class="word-item">${word}</div>`).join('')}
                </div>
              </div>
              ` : ''}
            </div>
            
            <div class="shiyi-right">
              ${sentences.length > 0 ? `
              <div class="shiyi-section">
                <div class="shiyi-title">
                  <span>✏️</span>
                  <span>例句练习</span>
                </div>
                <div class="sentence-list">
                  ${sentences.map(sentence => `<div class="sentence-item">${sentence}</div>`).join('')}
                </div>
              </div>
              ` : `
              <div class="shiyi-section">
                <div class="shiyi-title">
                  <span>✏️</span>
                  <span>例句练习</span>
                </div>
                <div class="shiyi-content" style="text-align: center; color: #999;">
                  暂无例句数据
                </div>
              </div>
              `}
            </div>
          </div>
        `;
      } catch (error) {
        console.error('显示释义数据出错:', error);
        container.innerHTML = `
          <div class="shiyi-display">
            <div style="text-align: center; padding: 100px;">
              <div style="font-size: 48px; margin-bottom: 20px;">❌</div>
              <p>加载释义数据失败</p>
            </div>
          </div>
        `;
      }
    }

    // 显示练习题目 - 使用真实数据
    async function showPracticeDisplay(container, char) {
      container.innerHTML = `
        <div class="practice-display">
          <div class="practice-header">
            <h2 class="practice-title">练习时间</h2>
            <p class="practice-subtitle">正在加载练习题...</p>
          </div>
        </div>
      `;

      try {
        const practiceData = await getPracticeQuestions(char);

        if (!practiceData || practiceData.length === 0) {
          container.innerHTML = `
            <div class="practice-display">
              <div class="practice-header">
                <h2 class="practice-title">练习时间</h2>
                <p class="practice-subtitle">暂无练习题，请在数据管理中心添加</p>
              </div>
              <div style="text-align: center; padding: 100px;">
                <div style="font-size: 64px; margin-bottom: 20px;">📝</div>
                <p style="font-size: 20px; color: #666;">还没有为"${char}"字创建练习题</p>
                <p style="color: #999; margin-top: 10px;">请联系管理员在数据管理中心添加练习题</p>
              </div>
            </div>
          `;
          return;
        }

        // 转换练习题格式
        questions = practiceData.map(q => {
          const result = {
            question: q.question_text,
            answer: 0
          };

          if (q.question_data && q.question_data.options) {
            result.options = q.question_data.options;
            result.answer = parseInt(q.correct_answer) || 0;
          } else {
            // 如果不是选择题，创建简单的选择题格式
            result.options = [q.correct_answer, '其他选项1', '其他选项2', '其他选项3'];
            result.answer = 0;
          }

          return result;
        });

        currentQuestionIndex = 0;

        container.innerHTML = `
          <div class="practice-display">
            <div class="practice-header">
              <h2 class="practice-title">练习时间</h2>
              <p class="practice-subtitle">让我们来检验一下学习成果吧！</p>
            </div>
            
            <div class="progress-dots">
              ${questions.map((_, i) => `
                <div class="progress-dot ${i === 0 ? 'active' : ''}" data-index="${i}"></div>
              `).join('')}
            </div>
            
            <div class="question-carousel" id="questionCarousel">
              <!-- 题目卡片将通过JS动态创建 -->
            </div>
            
            <div class="card-nav">
              <button class="card-nav-btn" onclick="prevQuestion()">←</button>
              <button class="card-nav-btn" onclick="nextQuestion()">→</button>
            </div>
          </div>
        `;

        // 初始化题目卡片
        renderQuestionCards();
      } catch (error) {
        console.error('显示练习题出错:', error);
        container.innerHTML = `
          <div class="practice-display">
            <div style="text-align: center; padding: 100px;">
              <div style="font-size: 48px; margin-bottom: 20px;">❌</div>
              <p>加载练习题失败</p>
            </div>
          </div>
        `;
      }
    }

    // 渲染题目卡片
    function renderQuestionCards() {
      const carousel = document.getElementById('questionCarousel');
      carousel.innerHTML = questions.map((q, index) => `
        <div class="question-card ${index === currentQuestionIndex ? 'active' : index < currentQuestionIndex ? 'prev' : 'next'}" data-index="${index}">
          <div class="question-number">第${index + 1}题</div>
          <div class="question-text">${q.question}</div>
          <div class="answer-options">
            ${q.options.map((opt, i) => `
              <div class="answer-option" onclick="selectAnswer(${index}, ${i})">${opt}</div>
            `).join('')}
          </div>
        </div>
      `).join('');
    }

    // 选择答案
    function selectAnswer(questionIndex, answerIndex) {
      if (questionIndex !== currentQuestionIndex) return;

      const card = document.querySelector(`.question-card[data-index="${questionIndex}"]`);
      const options = card.querySelectorAll('.answer-option');

      // 清除之前的选择
      options.forEach(opt => opt.classList.remove('selected', 'correct', 'wrong'));

      // 标记选择的答案
      options[answerIndex].classList.add('selected');

      // 检查答案
      setTimeout(() => {
        const isCorrect = answerIndex === questions[questionIndex].answer;
        options[answerIndex].classList.add(isCorrect ? 'correct' : 'wrong');

        if (!isCorrect) {
          // 显示正确答案
          options[questions[questionIndex].answer].classList.add('correct');
        }

        // 2秒后自动切换到下一题
        setTimeout(() => {
          if (currentQuestionIndex < questions.length - 1) {
            nextQuestion();
          } else {
            // 练习完成
            showPracticeComplete();
          }
        }, 2000);
      }, 500);
    }

    // 上一题
    function prevQuestion() {
      if (currentQuestionIndex > 0) {
        currentQuestionIndex--;
        updateQuestionDisplay();
      }
    }

    // 下一题
    function nextQuestion() {
      if (currentQuestionIndex < questions.length - 1) {
        currentQuestionIndex++;
        updateQuestionDisplay();
      }
    }

    // 更新题目显示
    function updateQuestionDisplay() {
      // 更新卡片状态
      document.querySelectorAll('.question-card').forEach((card, index) => {
        card.classList.remove('active', 'prev', 'next');
        if (index === currentQuestionIndex) {
          card.classList.add('active');
        } else if (index < currentQuestionIndex) {
          card.classList.add('prev');
        } else {
          card.classList.add('next');
        }
      });

      // 更新进度指示器
      document.querySelectorAll('.progress-dot').forEach((dot, index) => {
        dot.classList.toggle('active', index === currentQuestionIndex);
      });
    }

    // 练习完成
    function showPracticeComplete() {
      const carousel = document.getElementById('questionCarousel');
      carousel.innerHTML = `
        <div class="question-card active" style="text-align: center;">
          <div style="font-size: 80px; margin-bottom: 20px;">🎉</div>
          <h2 style="font-size: 36px; color: #f5576c; margin-bottom: 20px;">练习完成！</h2>
          <p style="font-size: 24px; color: #666;">你真棒！继续加油学习吧！</p>
          <button class="card-nav-btn" style="position: static; margin-top: 30px; width: auto; padding: 15px 40px; border-radius: 30px;" onclick="restartPractice()">再练一次</button>
        </div>
      `;
    }

    // 重新开始练习
    function restartPractice() {
      currentQuestionIndex = 0;
      renderQuestionCards();
      updateQuestionDisplay();
    }

    // 提交答案（保留兼容性）
    function submitAnswers() {
      // 已通过自动提交处理
    }

    // 下一组练习（保留兼容性）
    function nextPractice() {
      restartPractice();
    }

    // 生成AI讲课稿
    async function generateScript() {
      const aiContent = document.getElementById('aiContent');
      const generateBtn = document.querySelector('.generate-btn');
      const sectionNames = ['字根学习', '偏旁笔画', '书写讲解', '拖拽组合', '游戏巩固'];
      const sectionTypes = ['root_learning', 'component_stroke', 'writing_guide', 'drag_compose', 'game_practice'];

      // 禁用按钮并显示加载状态
      generateBtn.disabled = true;
      generateBtn.innerHTML = '🔄 生成中...';
      generateBtn.style.opacity = '0.7';

      // 显示详细的生成状态
      aiContent.innerHTML = `
        <div style="text-align: center; padding: 40px;">
          <div style="font-size: 48px; margin-bottom: 20px; animation: spin 2s linear infinite;">🤖</div>
          <h3 style="color: #667eea; margin-bottom: 15px;">AI正在为您生成讲课稿</h3>
          <p style="color: #666; margin-bottom: 20px;">正在连接AI服务器...</p>
          <div style="width: 100%; background: #f0f0f0; border-radius: 10px; overflow: hidden;">
            <div id="progress-bar" style="width: 0%; height: 6px; background: linear-gradient(90deg, #667eea, #764ba2); transition: width 0.3s;"></div>
          </div>
          <p id="status-text" style="color: #999; font-size: 14px; margin-top: 10px;">准备中...</p>
        </div>
        <style>
          @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
        </style>
      `;

      // 获取进度条和状态文本元素
      const progressBar = document.getElementById('progress-bar');
      const statusText = document.getElementById('status-text');

      try {
        // 步骤1: 获取课程信息
        progressBar.style.width = '20%';
        statusText.textContent = '📋 获取课程信息...';

        const courseResponse = await CourseCatalogAPI.getCourseDetail(currentCourseNumber);
        if (!courseResponse.success) {
          throw new Error('获取课程信息失败');
        }

        const course = courseResponse.data;
        const currentChar = course.target_char;
        const moduleType = sectionTypes[currentSection - 1];
        const sectionName = sectionNames[currentSection - 1];

        // 步骤2: 准备AI请求
        progressBar.style.width = '40%';
        statusText.textContent = `🎯 准备生成"${currentChar}"字的${sectionName}讲稿...`;

        // 添加小延迟让用户看到进度
        await new Promise(resolve => setTimeout(resolve, 500));

        // 步骤3: 调用AI生成
        progressBar.style.width = '60%';
        statusText.textContent = '🤖 AI正在创作中，请耐心等待...';

        const aiResponse = await fetch(`http://localhost:3002/api/ai/lecture-script`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            character: currentChar,
            module_type: moduleType,
            section_name: sectionName,
            word_count: 800,
            courseNumber: currentCourseNumber,
            provider: 'siliconflow',
            model: 'qwen2.5-7b'
          })
        });

        // 步骤4: 处理响应
        progressBar.style.width = '80%';
        statusText.textContent = '📝 处理AI生成结果...';

        const aiData = await aiResponse.json();

        let scriptContent;
        let isAIGenerated = false;

        if (aiData.success && aiData.data && aiData.data.script_content) {
          scriptContent = aiData.data.script_content;
          isAIGenerated = !aiData.data.fallback;
        } else {
          // 使用增强的模板内容作为后备
          scriptContent = `
            <div style="background: linear-gradient(135deg, #fff9c4 0%, #ffe0b2 100%); padding: 20px; border-radius: 15px; margin-bottom: 20px; border-left: 5px solid #ff9800;">
              <h3 style="color: #e65100; margin-bottom: 15px;">⚠️ 使用模板内容</h3>
              <p style="color: #bf360c;">AI服务暂时不可用，系统已为您提供精心设计的教学模板。</p>
            </div>
            
            <h3 style="color: #667eea; border-bottom: 3px solid #e8e8ff; padding-bottom: 10px;">${sectionName} - ${currentChar}字</h3>
            
            <div style="background: #f8f9ff; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #4caf50; margin-bottom: 10px;">🎯 教学目标</h4>
              <p>让孩子认识并理解"${currentChar}"字的含义、结构和用法，培养对汉字的兴趣。</p>
            </div>
            
            <div style="background: #fff8e1; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #ff9800; margin-bottom: 10px;">📖 开场引入</h4>
              <p>小朋友们好！今天我们要认识一个非常有趣的汉字——"${currentChar}"。${currentSection === 1 ? `大家看，这个字像不像一棵树呢？古人就是看着大树的样子，创造了这个字。` :
              currentSection === 2 ? `我们来看看"${currentChar}"字作为偏旁时，会和哪些字做朋友。` :
                currentSection === 3 ? `现在让我们一起来学习"${currentChar}"字的正确写法。` :
                  currentSection === 4 ? `让我们通过有趣的拼字游戏，看看"${currentChar}"能组成哪些新字。` :
                    `通过好玩的游戏，让我们更深入地记住"${currentChar}"字。`
            }</p>
            </div>
            
            <div style="background: #e8f5e8; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #4caf50; margin-bottom: 10px;">🌟 重点讲解</h4>
              <ul style="margin-left: 20px; line-height: 1.8;">
                <li>${currentChar}字的起源：展示甲骨文演变过程</li>
                <li>基本含义：探讨字的本义和引申义</li>
                <li>常用词组：列举生活中常见的词语</li>
                <li>生活应用：联系日常生活中的例子</li>
              </ul>
            </div>
            
            <div style="background: #e3f2fd; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #2196f3; margin-bottom: 10px;">🎨 互动环节</h4>
              <ul style="margin-left: 20px; line-height: 1.8;">
                <li>让孩子们观察教室里的相关物品</li>
                <li>鼓励孩子说出包含"${currentChar}"字的词语</li>
                <li>${currentSection === 3 ? '一起书空练习，注意笔顺' : '进行相关的互动活动'}</li>
              </ul>
            </div>
            
            <div style="background: #f3e5f5; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #9c27b0; margin-bottom: 10px;">📝 课堂小结</h4>
              <p>今天我们学习了"${currentChar}"字，它不仅是一个独立的汉字，还能和其他字组合成新的字词。回家后，小朋友们可以找找家里有哪些和"${currentChar}"相关的东西，下节课来分享哦！</p>
            </div>
            
            <div style="background: #fff3e0; padding: 20px; border-radius: 10px; margin: 20px 0;">
              <h4 style="color: #ff5722; margin-bottom: 10px;">💡 教学提示</h4>
              <ul style="margin-left: 20px; line-height: 1.8;">
                <li>语速适中，保持亲和力</li>
                <li>多使用肢体语言辅助说明</li>
                <li>及时表扬孩子的参与和回答</li>
              </ul>
            </div>
          `;
        }

        // 步骤5: 保存到后端
        progressBar.style.width = '90%';
        statusText.textContent = '💾 保存讲课稿...';

        const saveResponse = await CourseCatalogAPI.saveCourseScript(
          currentCourseNumber,
          moduleType,
          scriptContent
        );

        // 步骤6: 完成
        progressBar.style.width = '100%';
        statusText.textContent = '✅ 生成完成！';

        // 短暂显示完成状态
        await new Promise(resolve => setTimeout(resolve, 800));

        if (saveResponse.success) {
          // 显示成功消息和生成的讲稿
          const successMessage = isAIGenerated ?
            `🎉 AI成功生成了${scriptContent.length}字的${sectionName}讲稿！` :
            `📋 已为您提供${sectionName}教学模板，您可以根据需要进行修改。`;

          aiContent.innerHTML = `
            <div style="background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); padding: 15px; border-radius: 10px; margin-bottom: 20px; border-left: 5px solid #28a745;">
              <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 24px;">${isAIGenerated ? '🤖' : '📋'}</span>
                <div>
                  <strong style="color: #155724;">${successMessage}</strong>
                  <div style="font-size: 12px; color: #155724; margin-top: 5px;">
                    ${isAIGenerated ? `使用模型: SiliconFlow/Qwen2.5-7B` : '使用模板内容'}
                    • 字数: ${scriptContent.length}字
                    • 生成时间: ${new Date().toLocaleTimeString()}
                  </div>
                </div>
              </div>
            </div>
            ${scriptContent}
          `;
        } else {
          throw new Error('保存讲稿失败');
        }

      } catch (error) {
        console.error('生成讲稿失败:', error);
        aiContent.innerHTML = `
          <div style="text-align: center; padding: 40px;">
            <div style="font-size: 48px; margin-bottom: 20px;">❌</div>
            <h3 style="color: #dc3545; margin-bottom: 15px;">生成失败</h3>
            <p style="color: #666; margin-bottom: 20px;">${error.message}</p>
            <button onclick="generateScript()" style="padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 8px; cursor: pointer;">
              重新生成
            </button>
          </div>
        `;
      } finally {
        // 恢复按钮状态
        generateBtn.disabled = false;
        generateBtn.innerHTML = '🤖 AI生成';
        generateBtn.style.opacity = '1';
      }
    }

    // 打开AI助手演示页面
    function openAIAssistant() {
      // 在新窗口中打开AI助手演示页面
      window.open('ai-assistant-demo.html', '_blank', 'width=1400,height=900,resizable=yes,scrollbars=yes');
    }

    // 批量生成全课讲稿
    async function batchGenerateScripts() {
      const aiContent = document.getElementById('aiContent');
      const sectionNames = ['字根学习', '偏旁笔画', '书写讲解', '拖拽组合', '游戏巩固'];
      const sectionTypes = ['root_learning', 'component_stroke', 'writing_guide', 'drag_compose', 'game_practice'];

      // 确认操作
      if (!confirm('确定要为当前课程生成全部5个板块的讲稿吗？这将覆盖已有的讲稿。')) {
        return;
      }

      aiContent.innerHTML = '<p style="color: #999; text-align: center; margin-top: 50px;">正在批量生成全课讲稿，请耐心等待...</p>';

      try {
        // 获取当前课程信息
        const courseResponse = await CourseCatalogAPI.getCourseDetail(currentCourseNumber);
        if (!courseResponse.success) {
          throw new Error('获取课程信息失败');
        }

        const course = courseResponse.data;
        const currentChar = course.target_char;

        let allScripts = '<div style="max-height: 400px; overflow-y: auto;">';
        let successCount = 0;

        // 逐个生成每个板块的讲稿
        for (let i = 0; i < sectionTypes.length; i++) {
          const moduleType = sectionTypes[i];
          const sectionName = sectionNames[i];

          // 更新进度
          aiContent.innerHTML = `<p style="color: #999; text-align: center; margin-top: 50px;">正在生成 ${sectionName} 讲稿... (${i + 1}/5)</p>`;

          try {
            // 使用简化模板内容
            const scriptContent = `
              <h3>${sectionName} - ${currentChar}字</h3>
              <p><strong>🎯 教学目标：</strong> 通过${sectionName}环节，让孩子深入理解"${currentChar}"字。</p>
              <p><strong>📖 重点内容：</strong> 结合${sectionName}的特点，展示"${currentChar}"字的魅力。</p>
              <p><strong>🎨 互动环节：</strong> 设计相关的互动活动，提高学习兴趣。</p>
              <p><strong>💡 教学提示：</strong> 注意观察孩子的反应，及时调整教学节奏。</p>
            `;

            // 保存到后端
            const saveResponse = await CourseCatalogAPI.saveCourseScript(
              currentCourseNumber,
              moduleType,
              scriptContent
            );

            if (saveResponse.success) {
              successCount++;
              allScripts += `<div style="margin-bottom: 20px; padding: 15px; background: rgba(102,126,234,0.1); border-radius: 10px;">
                <strong style="color: #667eea;">✅ ${sectionName}</strong> - 生成成功
              </div>`;
            } else {
              allScripts += `<div style="margin-bottom: 20px; padding: 15px; background: rgba(255,107,107,0.1); border-radius: 10px;">
                <strong style="color: #ff6b6b;">❌ ${sectionName}</strong> - 保存失败
              </div>`;
            }
          } catch (error) {
            console.error(`生成${sectionName}讲稿失败:`, error);
            allScripts += `<div style="margin-bottom: 20px; padding: 15px; background: rgba(255,107,107,0.1); border-radius: 10px;">
              <strong style="color: #ff6b6b;">❌ ${sectionName}</strong> - 生成失败
            </div>`;
          }

          // 添加延迟避免API限制
          await new Promise(resolve => setTimeout(resolve, 500));
        }

        allScripts += '</div>';
        allScripts += `<div style="text-align: center; margin-top: 20px; padding: 15px; background: rgba(76,175,80,0.1); border-radius: 10px;">
          <strong style="color: #4caf50;">🎉 批量生成完成！成功生成 ${successCount}/5 个讲稿</strong>
        </div>`;

        aiContent.innerHTML = allScripts;

      } catch (error) {
        console.error('批量生成失败:', error);
        aiContent.innerHTML = '<p style="color: #ff4757; text-align: center; margin-top: 50px;">批量生成失败，请重试。</p>';
      }
    }

    // 简单的编辑和排版功能
    let editMode = false;
    let originalContent = '';

    // 切换编辑模式
    function toggleEditMode() {
      const aiContent = document.getElementById('aiContent');
      const editIcon = document.getElementById('editIcon');
      const editText = document.getElementById('editText');
      const editBtn = document.querySelector('.toolbar-btn');

      editMode = !editMode;

      if (editMode) {
        // 进入编辑模式
        originalContent = aiContent.innerHTML;
        aiContent.contentEditable = true;
        aiContent.focus();
        editIcon.textContent = '👁️';
        editText.textContent = '查看';
        editBtn.classList.add('active');
        showMessage('已进入编辑模式，可以直接修改内容', 'info');
      } else {
        // 退出编辑模式
        aiContent.contentEditable = false;
        editIcon.textContent = '📝';
        editText.textContent = '编辑';
        editBtn.classList.remove('active');
        showMessage('已退出编辑模式', 'info');
      }
    }

    // 格式化文本
    function formatText(command) {
      if (!editMode) {
        showMessage('请先进入编辑模式', 'error');
        return;
      }

      document.execCommand(command, false, null);
      document.getElementById('aiContent').focus();
    }

    // 增大字体
    function increaseFontSize() {
      if (!editMode) {
        showMessage('请先进入编辑模式', 'error');
        return;
      }

      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        if (!range.collapsed) {
          const span = document.createElement('span');
          span.style.fontSize = '120%';
          range.surroundContents(span);
        }
      }
    }

    // 减小字体
    function decreaseFontSize() {
      if (!editMode) {
        showMessage('请先进入编辑模式', 'error');
        return;
      }

      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        if (!range.collapsed) {
          const span = document.createElement('span');
          span.style.fontSize = '90%';
          range.surroundContents(span);
        }
      }
    }

    // 保存内容
    async function saveContent() {
      if (!currentCourseNumber || !editMode) {
        showMessage('请先选择课程并进入编辑模式', 'error');
        return;
      }

      const aiContent = document.getElementById('aiContent');
      const content = aiContent.innerHTML;
      const sectionTypes = ['root_learning', 'component_stroke', 'writing_guide', 'drag_compose', 'game_practice'];
      const moduleType = sectionTypes[currentSection - 1];

      try {
        const response = await CourseCatalogAPI.saveCourseScript(currentCourseNumber, moduleType, content);

        if (response.success) {
          showMessage('内容保存成功！', 'success');
          originalContent = content;
        } else {
          showMessage('保存失败，请重试', 'error');
        }
      } catch (error) {
        console.error('保存失败:', error);
        showMessage('保存失败：' + error.message, 'error');
      }
    }

    // 显示消息提示
    function showMessage(message, type = 'info') {
      const colors = {
        success: '#28a745',
        error: '#dc3545',
        info: '#667eea'
      };

      const messageEl = document.createElement('div');
      messageEl.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: white;
        color: ${colors[type]};
        padding: 12px 20px;
        border-radius: 6px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        z-index: 10000;
        border-left: 4px solid ${colors[type]};
        max-width: 300px;
        font-size: 14px;
      `;
      messageEl.textContent = message;

      document.body.appendChild(messageEl);
      setTimeout(() => {
        if (messageEl.parentNode) {
          messageEl.parentNode.removeChild(messageEl);
        }
      }, 3000);
    }

    // 刷新讲课稿内容
    function refreshScript() {
      if (currentCourseNumber) {
        showMessage('正在刷新内容...', 'info');
        loadSavedScript();
      } else {
        showMessage('请先选择课程', 'error');
      }
    }

    // 更新最后更新时间显示
    function updateLastUpdateTime(timeString) {
      const updateInfoEl = document.getElementById('lastUpdateInfo');
      if (updateInfoEl) {
        updateInfoEl.textContent = `最后更新: ${timeString}`;
      }
    }

    // 打开后端编辑器
    function openBackendEditor() {
      if (!currentCourseNumber) {
        showMessage('请先选择课程', 'error');
        return;
      }

      // 前端到后端的模块类型映射
      const moduleMapping = {
        'root_learning': 'character_learning',      // 字根学习
        'component_stroke': 'radical_strokes',      // 偏旁笔画  
        'writing_guide': 'writing_guide',           // 书写讲解
        'drag_compose': 'combination_drag',         // 拖拽组合
        'game_practice': 'game_consolidation'       // 游戏巩固
      };

      const sectionTypes = ['root_learning', 'component_stroke', 'writing_guide', 'drag_compose', 'game_practice'];
      const frontendModuleType = sectionTypes[currentSection - 1];
      const backendModuleType = moduleMapping[frontendModuleType];

      // 打开后端管理页面 - 使用映射后的模块类型
      const backendUrl = `comprehensive-admin.html?course=${currentCourseNumber}&module=${backendModuleType}`;
      window.open(backendUrl, '_blank');

      showMessage(`已打开后端编辑器 - 课程${currentCourseNumber}的${getModuleName(frontendModuleType)}`, 'info');
    }

    // 获取模块中文名称
    function getModuleName(moduleType) {
      const moduleNames = {
        'root_learning': '字根学习',
        'component_stroke': '偏旁笔画',
        'writing_guide': '书写讲解',
        'drag_compose': '拖拽组合',
        'game_practice': '游戏巩固'
      };
      return moduleNames[moduleType] || moduleType;
    }
  </script>
</body>

</html>